﻿import QtQuick 2.15
import QtQuick.Controls 2.15

Item {
    property string number: ""
    property string name: ""
    property string curruntIP: ""
    property string curruntPort: ""

    //消息框宽高
    property int msgRectHeight: 0
    property int msgRectWidth: 0
    //行数标志
    property int msgRectFlag: 0

    //聚焦高度
    property int msgFocusHeight: 0

    Rectangle{
        id:chatPageBackRect
        anchors.fill: parent
        Rectangle{
            id: header
            width: parent.width
            height: width/10
            anchors.top: parent.top
            color: "#404142"
            z: 10

            Rectangle{
                width: parent.width/4
                height: parent.height
                anchors.verticalCenter: parent.verticalCenter
                anchors.horizontalCenter: parent.horizontalCenter
                opacity: 0
                MouseArea{
                    anchors.fill: parent
                    property point clickPos:"0,0"
                    onPressed:{
                    clickPos =Qt.point(mouseX, mouseY)
                    }
                    onPositionChanged:{
                    //鼠标偏移量
                    var delta =Qt.point(mouseX-clickPos.x, mouseY-clickPos.y)
                    rootWindow.setX(rootWindow.x+delta.x)
                    rootWindow.setY(rootWindow.y+delta.y)
                    }
                }
            }
            Text {
                id: settingTitle
                color: "#ffffff"
                text: name
                anchors.verticalCenter: parent.verticalCenter
                anchors.horizontalCenter: parent.horizontalCenter
                horizontalAlignment: Text.AlignHCenter
                verticalAlignment: Text.AlignVCenter
                font.bold: true
                font.family: "Arial"
                font.pointSize: 16

            }

            Button {
                id: settingBackButton
                width: parent.height/2
                height: width
                anchors.verticalCenter: parent.verticalCenter
                anchors.left: parent.left
                icon.source: "qrc:/img/reback.png"
                anchors.leftMargin: width

                onClicked: {
                    pageStackView.clear(StackView.PopTransition)
                    pageStackView.push("FirstPage.qml", StackView.PopTransition)
                    console.log("FirstPage.qml is loading...")
                }

            }
        }


        Rectangle{
            id: inputRect
            width: parent.width
            height: width/10
            color: "#f0f0f0"
            anchors.bottom: parent.bottom
            anchors.bottomMargin: 0
            z: 10

            TextInput{
                id: chatInput
                width: parent.width*0.8
                height: parent.height*0.9
                color: "#000000"
                anchors.verticalCenter: parent.verticalCenter
                anchors.left: parent.left
                verticalAlignment: Text.AlignVCenter
                anchors.leftMargin: 5
                maximumLength: 500
                wrapMode: TextInput.WrapAnywhere
                clip: true
                selectByMouse: true
                z: 2

                onAccepted: {
                    sendNewMsg()
                }


            }

            Rectangle{
                anchors.fill: chatInput
                color: "#ffffff"
                z: 1
            }

            Button{
                id: sendButton
                width: parent.height*0.9
                height: width
                anchors.verticalCenter: parent.verticalCenter
                anchors.right: parent.right
                icon.color: "#00000000"
                icon.source: "qrc:/img/send.png"
                anchors.rightMargin: 0
                onClicked: {
                    sendNewMsg()
                }
            }

            Button{
                width: parent.height*0.9
                height: width
                anchors.verticalCenter: parent.verticalCenter
                anchors.right: sendButton.left
                icon.color: "#00000000"
                icon.source: "qrc:/img/face.png"
                anchors.rightMargin: 0
                onClicked: {

                }
            }
        }


        Rectangle{
            id: totalChatContentBack
            width: parent.width
            height: parent.height-header.height-inputRect.height
            anchors.top: header.bottom

            Flickable{
                id: chatFlick
                width: parent.width
                height: parent.height
                topMargin: 5
                bottomMargin:5
                contentWidth: width
                contentHeight: chatMsgColumn.height
                flickableDirection: Flickable.VerticalFlick
                Column{
                    id: chatMsgColumn
                    width: parent.width
                    spacing: 5

                    Connections{
                        target: socketManager
                        ignoreUnknownSignals:true
                        function onRecMsgAddRect() {
                            console.log("onRecMsgAddRect is running...")
                            recNewMsg()
                        }
                    }

                    Component.onCompleted:{
                        console.log("ChatPage.qml>>当前页的账号：" + number)
                        //查询本地消息记录
                        var listMsg = dbManager.queryMsgDate("TotalMsg", number)

                        //创建消息框
                        const sendComponent = Qt.createComponent("ChatMsgRectComponeent.qml")
                        const recComponent = Qt.createComponent("ChatMsgRecComponent.qml")
                        for(var i in listMsg){
                            //判断是否为自己发送的消息
                            var self = listMsg[i].self
                            console.log("TotalMsg当前消息所属为：", self)
                            if(self==="1"){
                                //创建消息框
                                sendComponent.createObject(chatMsgColumn)

                            }
                            else{
                                recComponent.createObject(chatMsgColumn)
                            }

                            //设置消息内容
                            chatMsgColumn.children[i].children[1].children[0].text = listMsg[i].msg

                            //获取文本内容宽(必须先宽后高)
                            msgRectFlag = listMsg[i].msg.length/12 + 1
                            console.log("行数为：" + msgRectFlag)

                            if(msgRectFlag>1){
                                msgRectWidth = chatFlick.width*0.6
                                console.log("消息框宽：" + msgRectWidth)
                            }
                            else{
                                msgRectWidth = chatMsgColumn.children[i].children[1].children[0].contentWidth + 30
                                console.log("消息框宽：" + msgRectWidth)
                            }
                            //设置消息框宽
                            chatMsgColumn.children[i].children[1].width = msgRectWidth


                            //获取文本内容高
                            msgRectHeight = chatMsgColumn.children[i].children[1].children[0].contentHeight + 30
                            console.log("消息框高：" + msgRectHeight)

                            //设置消息框高
                            chatMsgColumn.children[i].height = msgRectHeight
                            chatMsgColumn.children[i].children[1].height = msgRectHeight - 5
//                            var x = chatMsgColumn.children[i].children[0]
//                            console.log("获取到的组件：",x)

                            //计算聚焦高度
                            msgFocusHeight = msgFocusHeight + msgRectHeight + 5
                        }
                        //设置消息框聚焦
                        console.log("msgFocusHeight：", msgFocusHeight)
                        chatFlick.contentY = msgFocusHeight - totalChatContentBack.height
                        console.log("chatFlick.contentY：", chatFlick.contentY)


                    }

                }

            }

        }

    }


    //发送新消息的函数
    function sendNewMsg(){
        //创建消息弹窗
        const component = Qt.createComponent("ChatMsgRectComponeent.qml")
        component.createObject(chatMsgColumn)
        chatMsgColumn.children[chatMsgColumn.children.length-1].children[1].children[0].text = chatInput.text
        console.log("当前消息框数量：" + chatMsgColumn.children.length)

        //获取输入框文本内容宽(必须先宽后高)
        msgRectFlag = chatInput.text.length/12 + 1
        console.log("行数为：" + msgRectFlag)

        if(msgRectFlag>1){
            msgRectWidth = chatFlick.width*0.6
            console.log("消息框宽：" + msgRectWidth)
        }
        else{
            msgRectWidth = chatMsgColumn.children[chatMsgColumn.children.length-1].children[1].children[0].contentWidth + 30
            console.log("消息框宽：" + msgRectWidth)
        }
        //设置消息框宽
        chatMsgColumn.children[chatMsgColumn.children.length-1].children[1].width = msgRectWidth

        //获取输入框文本内容高
        msgRectHeight = chatMsgColumn.children[chatMsgColumn.children.length-1].children[1].children[0].contentHeight + 30
        console.log("消息框高：" + msgRectHeight)

        //设置消息框高
        chatMsgColumn.children[chatMsgColumn.children.length-1].height = msgRectHeight
        chatMsgColumn.children[chatMsgColumn.children.length-1].children[1].height = msgRectHeight - 5


        //设置消息框聚焦
        console.log("msgFocusHeight：", msgFocusHeight)
        chatFlick.contentY = msgFocusHeight + msgRectHeight + 5
        console.log("chatFlick.contentY：", chatFlick.contentY)

        //将当前消息文本插入数据库(表名：TotalMsg)
        dbManager.insertMsgDate("TotalMsg", name, number, chatInput.text, '1')

        //将消息发送给对方
        var listData = dbManager.queryUserInfo("UserInfo")
        var selfName = listData[0].name
        var selfNumber = listData[0].number
        var img = ""
        var ip = listData[0].ip
        var port = listData[0].port
        var msg = chatInput.text
        var data = {"name": selfName, "number": selfNumber, "img": img, "ip": ip, "port": port, "msg": msg}
        socketManager.sendMsg(curruntIP, Number(curruntPort), data)

        console.log("连接对象：", curruntIP, curruntPort)
        chatInput.clear()
    }

    //接收新消息的函数
    function recNewMsg(){
        //从数据库读取消息
        var listMsg = dbManager.queryRecNewMsg("TotalMsg", number)
        var msg = listMsg[0].msg
        var time = listMsg[0].time

        //创建消息弹窗
        const component = Qt.createComponent("qrc:/ChatMsgRecComponent.qml")
        component.createObject(chatMsgColumn)
        chatMsgColumn.children[chatMsgColumn.children.length-1].children[1].children[0].text = msg
        console.log("当前消息框数量：" + chatMsgColumn.children.length)

        //获取文本内容宽(必须先宽后高)
        msgRectFlag = listMsg[0].msg.length/12 + 1
        console.log("行数为：" + msgRectFlag)

        if(msgRectFlag>1){
            msgRectWidth = chatFlick.width*0.6
            console.log("消息框宽：" + msgRectWidth)
        }
        else{
            msgRectWidth = chatMsgColumn.children[chatMsgColumn.children.length-1].children[1].children[0].contentWidth + 30
            console.log("消息框宽：" + msgRectWidth)
        }
        //设置消息框宽
        chatMsgColumn.children[chatMsgColumn.children.length-1].children[1].width = msgRectWidth

        //获取输入框文本内容高
        msgRectHeight = chatMsgColumn.children[chatMsgColumn.children.length-1].children[1].children[0].contentHeight + 30
        console.log("消息框高：" + msgRectHeight)

        //设置消息框高
        chatMsgColumn.children[chatMsgColumn.children.length-1].height = msgRectHeight
        chatMsgColumn.children[chatMsgColumn.children.length-1].children[1].height = msgRectHeight - 5


        //设置消息框聚焦
        console.log("msgFocusHeight：", msgFocusHeight)
        chatFlick.contentY = msgFocusHeight + msgRectHeight + 5
        console.log("chatFlick.contentY：", chatFlick.contentY)
    }



}


